<template>
  <div class="contentBox">
    <div class="leftView">
      <div>
        <div class="textAlignCenter marginBottom40">
          <img src="@/assets/logo/logo-title.png" alt="" width="215" height="42">
        </div>
        <h3 class="title">上海市注册会计师行业</h3>
        <h3 class="title">鉴证业务报告防伪编码查询</h3>
        <el-form ref="codeForm"
                 :model="codeForm"
                 :rules="codeRules"
                 :label-position="labelPosition"
                 class="login-form">
          <el-form-item prop="antiCounterfeitingCoding" label="防伪编码">
            <el-input
              v-model="codeForm.antiCounterfeitingCoding"
              type="text"
              auto-complete="off"
              autofocus
              placeholder="请输入防伪编码" />
          </el-form-item>
          <!--        滑块验证-->
          <el-form-item prop="slideStatus" label="验证码">
            <JcRange :successFun="slideSuccess" :errorFun="slideError" />
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleSubmit"
            >
              <span>搜 索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        title="请输入报告文号"
        :visible.sync="dialogVisible"
        width="360px"
        :close-on-click-modal="false"
        append-to-body
        center
      >
        <el-form :model="commonForm" :rules="commonFormRules" ref="commonForm">
          <el-form-item prop="reason">
            <el-input v-model="commonForm.reportNo"  type="text"
                      auto-complete="off"
                      autofocus placeholder="请输入报告文号..."></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleReportNoSubmit()">提交</el-button>
          <el-button @click="dialogVisible=false;">取 消</el-button>
        </div>
      </el-dialog>
      </div>


  </div>
</template>

<script>
import JcRange from '@/components/SliderVerify'
import { getAntiCode ,getAntiCodeByReportNo} from '@/api/system/assurance'
export default {
  name: "CodeSearch",
  components: { JcRange },
  data() {
    let validateSlide = (rule, value, callback) => {
        let self = this;
        if (self.codeForm.slideStatus !== true) {
            callback(new Error('请向右滑动验证'));
        } else {
            callback();
        }
    };
    return {
      labelPosition: "top",
      dialogVisible:false,
      commonForm:{
        reportNo: '', // 报告文号
      },
      commonFormRules: {
        reportNo: [
          {required: true, trigger: "blur", message: "报告文号不能为空"},
        ],
      },
      codeForm: {
        antiCounterfeitingCoding: '', // 防伪编码
        slideStatus: false,
      },
      codeRules: {
        antiCounterfeitingCoding: [
          { required: true, trigger: "blur", message: "请输入防伪编码" }
        ],
        slideStatus: { validator: validateSlide, trigger: 'change' }
      },
    };
  },
  created() {
  },
  methods: {
    handleSubmit() {
      let self = this;
      this.$refs.codeForm.validate(valid => {
        if (valid) {
            getAntiCode(this.codeForm.antiCounterfeitingCoding).then(
            response=> {
                let resCode = response.data.code;
                let resData = response.data.data;
                if(resCode===200){
                  // 数据状态：0：不予报备，1：强审通过，2：数据异常，3：正常，4：作废，5：预上传，6：提交审核，7：审核通过，8：审核不通过,9：待确认
                  if(resData.dataStatus == 1 || resData.dataStatus == 3 || resData.dataStatus == 7 || resData.dataStatus == 9 || resData.dataStatus == 2){
                    this.$router.push({ path: '/codeSearch/detail', query: { antiCounterfeitingCoding: this.codeForm.antiCounterfeitingCoding}})
                  }else{
                    self.$message({
                      message: '没有查到数据!',
                      type: 'error'
                    });
                  }
                }else if(resCode== 555 ){
                    self.dialogVisible =  true;
                } else{
                    self.$message({
                        message: '没有查到数据!',
                        type: 'error'
                    });
                }
            }).catch(function() {
                // self.$message({
                //     message: '防伪编码错误!',
                //     type: 'error'
                // });
            });
        }
      });
    },
    /** 滑块验证 成功*/
    slideSuccess() {
        this.codeForm.slideStatus = true;
        this.$refs['codeForm'].clearValidate(['slideStatus']); // 清空校验
    },
    /** 滑块验证 失败*/
    slideError() {
        this.codeForm.slideStatus = false;
    },
    handleReportNoSubmit() {
      let self = this;
      const reportno = encodeURI(self.commonForm.reportNo);
      self.$refs.commonForm.validate(valid => {
        if (valid) {
          getAntiCodeByReportNo(reportno,self.codeForm.antiCounterfeitingCoding).then(
            response=> {
              let resCode = response.data.code;
              let resData = response.data.data;
              if(resCode===200){
                // 数据状态：0：不予报备，1：强审通过，2：数据异常，3：正常，4：作废，5：预上传，6：提交审核，7：审核通过，8：审核不通过,9：待确认
                if(resData.dataStatus == 1 || resData.dataStatus == 3 || resData.dataStatus == 7 || resData.dataStatus == 9 || resData.dataStatus == 2){
                  self.$router.push({ path: '/codeSearch/detail', query: { antiCounterfeitingCoding: self.codeForm.antiCounterfeitingCoding,reportNo:self.commonForm.reportNo}})
                }else{
                  self.$message({
                    message: '没有查到数据!',
                    type: 'error'
                  });
                }
              }else if(resCode== 555 ){
                self.$message({
                  message: '报告文号不正确!',
                  type: 'error'
                });
              } else{
                self.$message({
                  message: '没有查到数据!',
                  type: 'error'
                });
              }
              self.dialogVisible=false
            }).catch(function() {
            // self.$message({
            //     message: '防伪编码错误!',
            //     type: 'error'
            // });
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.contentBox {
  height: 100%;
  background-image: url("../../assets/image/bg.png");
  background-size: cover;
}

.leftView{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  min-height: 100vh;
  background: #fff;
}
.title {
  margin: 0 auto 10px auto;
  font-size: 20px;
  text-align: center;
  color: #004B9E;
  font-weight: 400;
}

.login-form {
  margin: 80px auto 0 auto;
  width: 300px;
  border-radius: 6px;
  background: #ffffff;

  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  content: '';  // 去掉 * 号
  color: #ff4949;
  margin-right: 4px;
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: #4164E3;
  border-color: #4164E3;
}
::v-deep .el-dialog .el-dialog__body{
  padding-bottom:0px;
  min-height:auto;
}
</style>
